<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <span
          style="
            color: #fff;
            display: inline-block;
            margin-bottom: 20px;
            font-size: 20px;
          "
          >Weblog</span
        >
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#001428"
          text-color="#fff"
          router
          active-text-color="#003C74"
        >
          <el-menu-item index="/after/watch">
            <i class="el-icon-monitor"></i>
            <span slot="title">仪表盘</span>
          </el-menu-item>
          <el-menu-item index="/after/text">
            <i class="el-icon-document"></i>
            <span slot="title">文章管理</span>
          </el-menu-item>
          <el-menu-item index="/after/cate">
            <i class="el-icon-folder-opened"></i>
            <span slot="title">分类管理</span>
          </el-menu-item>
          <el-menu-item index="/after/tage">
            <i class="el-icon-price-tag"></i>
            <span slot="title">标签管理</span>
          </el-menu-item>
          <el-menu-item index="/after/web">
            <i class="el-icon-setting"></i>
            <span slot="title">博客设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-tooltip class="item" content="跳转博客前台" placement="bottom">
            <span class="el-icon-s-home" @click="home()"></span>
          </el-tooltip>
          <el-tooltip class="item" content="刷新" placement="bottom">
            <span class="el-icon-refresh" @click="refresh()"></span>
          </el-tooltip>
          <el-tooltip class="item" content="全屏" placement="bottom">
            <span class="el-icon-full-screen" @click="full()"></span>
          </el-tooltip>
          <div class="username">
            <img
              :src="this.userf.avatar"
              style="width: 40px; height: 40px; border-radius: 50%"
              alt=""
            />
            <p style="">{{ this.userf.username }}</p>
          </div>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "AfterView",
  data() {
    return {
      userf: "",
    };
  },
  created() {
    this.getAd();
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    home() {
      this.$router.push("/about");
    },
    refresh() {
      this.$router.go(0);
    },
    full() {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen().catch((err) => {
          console.log("进入全屏失败:", err);
        });
      } else {

        document.exitFullscreen().catch((err) => {
          console.log("退出全屏失败:", err);
        });
      }
    },
    async getAd() {
      let res = await this.$axios.post("/api/admin/detail");
      console.log(res);
      this.userf = res.data.data;
    },
  },
};
</script>

<style scoped>
.el-aside {
  width: 200px;
  height: 100vh;
  background-color: #001428;
  color: #333;
  text-align: center;
}
.el-header {
  display: flex;
  justify-content: right;
  align-items: center;
  background-color: rgb(255, 255, 255);
}
.el-main {
  flex: 1;
  min-height: calc(100vh - 60px);
  background-color: #ffffff;
  color: #333;
  text-align: center;
  box-shadow: 1px 1px 1px 1px #001428;
  padding: 20px;
}
.item {
  margin-right: 20px;
}
.el-container {
  width: 100%;
  height: 100vh;
}
</style>